<template>
  <view class="returnList">
    <view class="data bgRed">
      <view v-if="orderDetail.salesState === 0">
        <view v-if="orderDetail.state === 0">
          <view class="titleTop">请耐心等待平台处理</view>
          <view class="titleButtom"
            >平台会在线下与您取得联系，请您随时保持关注</view
          >
        </view>
        <view class="state" v-if="orderDetail.state === 1">
          <view class="state" v-if="orderDetail.serviceType === 0">
            已通过平台审核,正在退款
          </view>
          <view class="state" v-if="orderDetail.serviceType === 1">
            <view class="titleTop">平台已同意退货，请尽快退货</view>
            <view class="titleButtom"
              >平台已同意您的退款申请，请尽快提交物流信息</view
            >
          </view>
        </view>
        <view class="state" v-if="orderDetail.state === 2">
          <view class="titleTop">等待平台退款</view>
          <view class="titleButtom"
            >平台收到商品检查无误后将为您操作退款，请耐心等待</view
          >
        </view>
        <view class="state" v-if="orderDetail.state === 3">
          <view class="titleTop">平台已退款</view>
          <view class="titleButtom">平台已退款，请您注意查收</view>
        </view>
      </view>
      <view v-if="orderDetail.salesState === 1"> 已撤销售后订单 </view>
      <!-- <view v-if="orderDetail.salesState === 2"> 商家已拒绝售后申请 </view> -->
      <view v-if="orderDetail.salesState === 2">
        <view class="titleTop">退款失败</view>
        <view class="titleButtom">平台已经线下沟通处理</view>
      </view>
    </view>
    <!-- 退款地址及物流 -->
    <view
      class="money"
      v-if="
        orderDetail.serviceType === 1 &&
        orderDetail.state != 0 &&
        orderDetail.salesState != 2
      "
    >
      <view class="express">
        <view class="address-left"
          ><text class="theme address-icon iconfont icon-a-locationhl"></text
        ></view>
        <view class="address-right"
          ><view>
            <text class="people"
              >收货人： {{ orderDetail.consignee || '' }}</text
            >
            <text class="phone">
              {{ orderDetail.phoneNumber || '' }}
            </text>
          </view>
          <view class="address">
            <text> {{ orderDetail.address || '' }}</text
            ><text
              @click="copyInfo(orderDetail.address)"
              class="copy"
              v-if="orderDetail.address"
              >复制</text
            >
          </view>
        </view>
      </view>

      <view class="logistics">
        <view class="left">
          <view class="left-top">商品已寄回</view>
          <view class="left-bottom"
            >点击{{ orderDetail.state === 2 ? '查看' : '填写' }}物流信息</view
          >
        </view>
        <view class="right">
          <view class="btns def" @click="toExpress">填写物流</view>
          <view
            class="btns def"
            @click="goLogistics(orderDetail)"
            v-if="orderDetail.state === 2"
            >查看物流</view
          >
        </view>
      </view>
      <!-- 退款信息 -->
      <!-- <view class="tips" v-if="orderDetail.state === 0">
        <text class="title">您已成功发起退款申请，请耐心等待商家处理</text>
        <view class="content">
          <view>· 卖家同意或超时未处理，系统将退款给您</view>
          <view
            >· 如果卖家拒绝，您可以修改退款申请后再次发起，卖家会重新处理</view
          >
        </view>
      </view> -->
      <!-- 撤销 -->
      <!-- <view class="tips" v-if="orderDetail.serviceType === 1 && orderDetail.state  >= 2">
				<text class="title">您已撤销售后申请</text>
				<view class="content">
					<view>· </view>
					<view>· </view>
				</view>
			</view> -->
      <!-- 商家拒接 -->
      <!-- <view class="tips" v-if="orderDetail.serviceType === 2 && orderDetail.state  >= 2">
				<text class="title">卖家已拒绝</text>
				<view class="content">
					<view>· </view>
					<view>· </view>
				</view>
			</view> -->
      <!-- <view class="bottom">
        <view
          class="btns def"
          v-if="
            orderDetail.salesState === 0 &&
            orderDetail.serviceType === 1 &&
            orderDetail.state === 1
          "
          @click="toExpress"
          >填写物流</view
        >

        <view
          class="btns def"
          v-if="orderDetail.salesState === 0"
          @click="cancelReq"
          >撤销申请</view
        >
        <view class="btns redBtn" @click="editReq">修改申请</view>
      </view> -->
    </view>
    <!-- 退款信息 -->
    <view class="rebackInfo">
      <view class="top"> 商品信息 </view>
      <view
        class="rebackItem"
        v-for="item in orderDetail.cartInfo"
        :key="item.id"
      >
        <image class="img" :src="item.productInfo.image" mode=""></image>
        <view class="info">
          <view class="productTitle">
            <view class="productName line1">
              {{ item.productInfo.storeName }}
            </view>
            <view class="price">￥{{ item.productInfo.price }} </view>
          </view>
          <view class="skus">
            <view class="sku"> {{ item.productInfo.attrInfo.sku }}</view>
            <view class="num"> x{{ item.cartNum }} </view>
          </view>
        </view>
      </view>

      <view class="bottom">
        <view class="orderCode"
          ><view class="left">订单编号: </view>
          <view class="right">
            <view>{{ orderDetail.orderCode || '' }}</view>
            <view
              @click="copyInfo(orderDetail.orderCode)"
              class="copy"
              v-if="orderDetail.orderCode"
              >复制</view
            >
          </view>
        </view>
        <view class="orderCode"
          ><view class="left">退款原因: </view>
          <view class="right">{{ orderDetail.reasons || '' }}</view>
        </view>
        <view class="orderCode"
          ><view class="left">退款金额: </view>
          <view class="right">￥{{ orderDetail.refundAmount || 0 }}</view>
        </view>
        <view class="orderCode"
          ><view class="left">申请件数: </view>
          <view class="right">{{ totaliNum }}</view>
        </view>
        <view class="orderCode"
          ><view class="left">申请时间: </view>
          <view class="right"> {{ orderDetail.createTime || '' }}</view>
        </view>
      </view>
    </view>
    <view class="serviceAll" :class="{ safePadding: isIOS }">
      <view class="service">
        <button open-type="contact" class="contacButton">
          <view class="item">
            <view class="iconfont icon-kefu"></view>
            <text class="name">联系客服</text>
          </view>
        </button>
      </view>
      <view class="bottom">
        <!-- <view
            class="btns def"
            v-if="
              orderDetail.salesState === 0 &&
              orderDetail.serviceType === 1 &&
              orderDetail.state === 1
            "
            @click="toExpress"
            >填写物流</view
          > -->

        <view
          class="btns def"
          v-if="
            (orderDetail.salesState === 0 && orderDetail.state != 3) ||
            orderDetail.state === 1
          "
          @click="cancelReq"
          >撤销申请</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { getAfterSealsDetail, rebackAfterSeals } from '@/api/aftersales.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      orderId: '',
      id: '',
      orderInfo: {},
      orderDetail: {},
      totaliNum: 0, //总件数
    }
  },
  computed: {
    ...mapState('user', ['isIOS']),
  },
  mounted() {
    this.orderId = this.$yroute.query.key
    this.id = this.$yroute.query.id
    this.getReturnDetail()
  },

  methods: {
    /** state售后状态 0已提交等待平台审核 1平台已审核 等待用户发货/退款 2 用户已发货 3已完成 */
    async getReturnDetail() {
      getAfterSealsDetail(this.orderId, this.id)
        .then(res => {
          this.orderDetail = res.data
          res.data.cartInfo.forEach(i => {
            this.totaliNum = this.totaliNum + i.cartNum
          })
          console.log('订单数据', this.orderDetail, this.totaliNum)
        })
        .catch(err => {
          uni.showToast({
            title: '订单异常',
            icon: 'none',
            duration: 2000,
          })
        })
    },
    //跳转物流信息
    goLogistics(value) {
      this.$yrouter.push({
        path: '/packageShop/pages/order/Logistics/index',
        query: { id: value.orderCode },
      })
    },
    //复制
    copyInfo(value) {
      console.log('value', value)
      uni.setClipboardData({
        data: value,
        success: function () {
          uni.$u.toast('复制成功')
        },
      })
    },
    toExpress() {
      this.$yrouter.push({
        path: '/packageShop/pages/order/submitExpress/index',
        query: {
          orderCode: this.orderId,
        },
      })
    },
    // 撤销申请
    async cancelReq() {
      rebackAfterSeals(this.orderId, this.id)
        .then(res => {
          uni.showToast({
            title: '已撤销',
            icon: 'none',
            duration: 2000,
          })
          setTimeout(() => {
            this.$yrouter.back()
          }, 1500)
        })
        .catch(err => {
          uni.showToast({
            title: '撤销失败',
            icon: 'none',
            duration: 2000,
          })
        })
    },
    // 修改申请
    editReq() {},
  },
}
</script>

<style scoped lang="scss">
$red: #ff6010;
$c-success: #FF5900;
.returnList {
  .colorRed {
    color: $red;
  }
  .bgRed {
    background-color: #fff;
  }
  .data {
    width: 100%;
    color: #1a1a1a;
    font-size: 500;
    margin: 16rpx 0;
    padding: 32rpx 0 32rpx 24rpx;
    .titleTop {
      margin-bottom: 24rpx;
      font-size: 32rpx;
    }
    .titleButtom {
      color: #999999;
      font-size: 24rpx;
    }
  }
  .money {
    .top {
      padding: 20rpx 30rpx;
      font-size: 30rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #f3f4f5;
    }
    .express {
      background-color: #fff;
      margin: 16rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 32rpx 24rpx;
      .address-right {
        padding-left: 24rpx;
        .people {
          color: #1a1a1a;
          font-size: 28rpx;
        }
        .phone {
          margin-left: 16rpx;
          color: #ccc;
          font-size: 26rpx;
        }
        .address {
          color: #666666;
          font-size: 26rpx;
          margin-top: 2rpx;
          .copy {
            color: #FF5900;
            margin-left: 10rpx;
          }
        }
      }
      .title {
        color: #333333;
      }
      .info {
        color: #999999;
      }
    }
    .logistics {
      background-color: #fff;
      margin: 16rpx 0;
      padding: 32rpx 0 32rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .left-top {
          color: #121212;
          font-size: 28rpx;
          margin-bottom: 8rpx;
        }
        .left-bottom {
          color: #999999;
          font-size: 26rpx;
        }
      }
      .right {
        .btns {
          width: 160rpx;
          height: 58rpx;
          margin: 0 10rpx;
          font-size: 24rpx;
          text-align: center;
          line-height: 58rpx;
          border-radius: 180rpx;
        }
        .def {
          color: #666666;
          border: 2rpx solid #dddddd;
        }
        .redBtn {
          color: #fff;
          background-color: $red;
        }
      }
    }
    .tips {
      height: 160rpx;
      padding: 20rpx 30rpx;
      color: #999999;
      border-bottom: 2rpx solid #f3f4f5;
      font-size: 26rpx;
      .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .content {
        font-size: 20rpx;
      }
    }
    .bottom {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: flex-end;
      .btns {
        width: 160rpx;
        height: 58rpx;
        margin: 0 10rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 58rpx;
        border-radius: 180rpx;
      }
      .def {
        color: #dddddd;
        border: 2rpx solid #dddddd;
      }
      .redBtn {
        color: #fff;
        background-color: $red;
      }
    }
  }
  .rebackInfo {
    padding: 32rpx 24rpx;
    background-color: #fff;
    .top {
      margin-bottom: 32rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
    }
    .rebackItem {
      font-size: 28rpx;
      display: flex;
      .img {
        width: 20%;
        height: 120rpx;
      }
      .info {
        margin-left: 24rpx;
        flex: 1;
        width: 80%;
        .productTitle {
          display: flex;
          .productName {
            margin-bottom: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #333333;
          }
          .price {
            color: #1a1a1a;
          }
        }
        .skus {
          font-size: 28rpx;
          color: #999999;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .bottom {
      margin-top: 32rpx;
      .orderCode {
        display: flex;
        font-size: 26rpx;
        padding-bottom: 20rpx;
        .left {
          color: #1a1a1a;
          width: 20%;
        }
        .right {
          width: 80%;
          margin-left: 80rpx;
          color: #999;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .copy {
          color: #FF5900;
        }
      }
      .orderCode:last-child {
        padding-bottom: 0;
      }
    }
  }
  .serviceAll {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    padding: 0 24rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .service {
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 98rpx;
        .icon-kefu {
          color: #FF5900;
          font-size: 36rpx;
        }
        .name {
          margin-left: 16rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 40rpx;
        }
      }
    }
    .btns {
      width: 160rpx;
      height: 58rpx;
      margin: 0 10rpx;
      font-size: 24rpx;
      text-align: center;
      line-height: 58rpx;
      border-radius: 180rpx;
    }
    .def {
      color: #666666;
      border: 2rpx solid #dddddd;
    }
    .redBtn {
      color: #fff;
      background-color: $red;
    }
  }
}

.safePadding {
  padding-bottom: 30rpx !important;
}
</style>
